<%--
  Created by IntelliJ IDEA.
  User: 杨飞龙
  Date: 2020/5/26
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
    <base href="<%=basePath%>">

    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="lib/z-tree/css/zTreeStyle/zTreeStyle.css">


    <%--js--%>
    <script type="text/javascript" src="lib/easyui/jquery.min.js">
    </script>
    <script type="text/javascript" src="lib/easyui/jquery.easyui.min.js">
    </script>
    <script type="text/javascript" src="lib/z-tree/js/jquery.ztree.all.js"></script>

    <title>index</title>
</head>

<body class="easyui-layout">
<div data-options="region:'north'" style="height:100px;">
    <div id="cc" class="easyui-layout" fit="true" data-options="border:false">

        <div data-options="region:'west',border:false" style="width:20%;background-color: skyblue">
            <img src="static/imges/logo.png" style="margin-top: 22px;" fit="true">
        </div>

        <div data-options="region:'center',border:false" style="width: 60%;text-align:center; background-color: skyblue">
            <div style="font-size: 40px;margin-top: 22px;color: #eeeeee">
                ting&nbsp;域&nbsp;主&nbsp;持&nbsp;人&nbsp;管&nbsp;理&nbsp;系&nbsp;统
            </div>

        </div>
        <div data-options="region:'east',border:false" style="width:20%;position: relative;background-color: skyblue">

            <div style="position: absolute; top: 10px;left: 20px;color: #eeeeee">
                <span>当前登录：${SESSION_ADMIN.aname}</span>
            </div>
            <div style="position: absolute; bottom: 10px;right: 20px;color: #eeeeee">
                <a href="logout.do">退出登录</a>
            </div>

        </div>
    </div>
</div>

<div data-options="region:'south'" style="height:60px;"></div>
<div data-options="region:'west'" style="width:250px;">
    <ul id="menutree" class="ztree"></ul>

</div>
<div data-options="region:'center',border:false" style="padding:5px;background:#eee;">
    <div id="menuTabs" fit="true" class="easyui-tabs">
        <div title="欢迎">
            <h3>欢迎使用ting域主持人管理系统</h3>
        </div>
    </div>
</div>
</body>



<script type="text/javascript">

    var setting={
        data:{
            simpleData:{
                enable:true,
                idKey:"mid",
                pIdKey:"pid"
            },
            key:{
                name:"mname",
                url: "xxx"
            }
        },
        //异步加载用户菜单
        async: {
            enable: true,
            url: "menu/list.do",
            dataFilter: ajaxDataFilter

        },
        //设置节点单击事件
        callback: {
            onClick: zTreeOnClick
        }

    };

    //预处理
    function ajaxDataFilter(treeId, parentNode, responseData) {
        if (responseData) {
            for(var i =0; i < responseData.length; i++) {
                responseData[i].open=true;
            }
        }
        return responseData;
    };

    function zTreeOnClick(event, treeId, treeNode) {

        if (treeNode.url != null){
            //判断有没有选项卡
           if ( $("#menuTabs").tabs('exists',treeNode.mname)){
                    //有，选中选项卡
               $("#menuTabs").tabs('select',treeNode.mname)
           }else {
                //没有创建选项卡
               $('#menuTabs').tabs('add',{
                   title: treeNode.mname,
                   fit:true,
                   closable:true,
                   content:"<iframe width='100%' height='99%' style='border: 0' src='"+treeNode.url+"' > </iframe>"
               });
           }

        }
    };

    $(document).ready(function () {
        $.fn.zTree.init($("#menutree"),setting);
    });

</script>
</html>
